<template>
  <div class="student-manage">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Upload" @click="handleImport">导入线索</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Tags" @click="handleTags">标签管理</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="MergeCells" @click="handleMerge">学员合并</el-button>
      </el-col>
    </el-row>

    <el-table :data="studentList" style="width: 100%">
      <el-table-column prop="id" label="学员ID" width="120" />
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="contact" label="联系方式" width="180" />
      <el-table-column prop="status" label="当前状态" width="120">
        <template #default="scope">
          <el-tag
            :type="getStatusType(scope.row.status)"
            size="small"
          >
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="source" label="来源渠道" width="120" />
      <el-table-column prop="course" label="报名课程" />
      <el-table-column prop="expectedPosition" label="期望岗位" />
      <el-table-column prop="education" label="学历" width="120" />
      <el-table-column prop="workExperience" label="工作经验" width="120" />
      <el-table-column prop="city" label="所在城市" width="120" />
      <el-table-column prop="tags" label="标签">
        <template #default="scope">
          <el-tag
            v-for="(tag, index) in scope.row.tags"
            :key="index"
            size="small"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="responsiblePerson" label="负责人" width="120" />
      <el-table-column prop="lastFollowTime" label="最后跟进时间" width="180" />
      <el-table-column prop="enrollmentHistory" label="报名历史" />
      <el-table-column prop="contractLink" label="合同信息链接">
        <template #default="scope">
          <el-link :href="scope.row.contractLink" target="_blank">查看合同</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="primary" icon="User" @click="viewProfile(scope.row)">画像</el-button>
          <el-button link type="primary" icon="Refresh" @click="changeStatus(scope.row)">变更状态</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls, .csv" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的学员数据
              <div style="margin-top: 10px;">仅允许导入xls、xlsx、csv格式文件。</div>
              <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
            </div>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 状态变更对话框 -->
    <el-dialog :title="'变更状态 - ' + currentStudent.name" v-model="statusDialog.open" width="400px" append-to-body>
      <el-form :model="statusForm" ref="statusFormRef" label-width="80px">
        <el-form-item label="当前状态">
          <el-tag :type="getStatusType(currentStudent.status)">{{ getStatusText(currentStudent.status) }}</el-tag>
        </el-form-item>
        <el-form-item label="目标状态" prop="newStatus">
          <el-select v-model="statusForm.newStatus" placeholder="请选择目标状态">
            <el-option v-for="state in availableStates" :key="state.value" :label="state.label" :value="state.value" :disabled="!state.available"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更原因" prop="reason">
          <el-input v-model="statusForm.reason" type="textarea" placeholder="请输入变更原因"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitStatusForm">确 定</el-button>
          <el-button @click="statusDialog.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 标签管理对话框 -->
    <el-dialog :title="'标签管理'" v-model="tagDialog.open" width="500px" append-to-body>
      <el-form :model="tagForm" ref="tagFormRef" label-width="80px">
        <el-form-item label="已选标签">
          <el-tag v-for="tag in selectedTags" :key="tag" closable @close="removeTag(tag)">{{ tag }}</el-tag>
        </el-form-item>
        <el-form-item label="推荐标签">
          <el-tag v-for="tag in recommendedTags" :key="tag" type="success" :closable="false" @click="addTag(tag)">{{ tag }}</el-tag>
        </el-form-item>
        <el-form-item label="自定义标签" prop="newTag">
          <el-input v-model="tagForm.newTag" placeholder="输入新标签后按回车添加"></el-input>
        </el-form-item>
        <el-form-item label="批量添加">
          <el-input v-model="tagForm.batchTags" type="textarea" placeholder="输入多个标签，用逗号分隔"></el-input>
          <el-button size="small" type="primary" @click="addBatchTags">添加</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitTagForm">确 定</el-button>
          <el-button @click="tagDialog.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 学员合并对话框 -->
    <el-dialog :title="'学员合并'" v-model="mergeDialog.open" width="600px" append-to-body>
      <div class="merge-container">
        <div class="merge-left">
          <h3>主学员</h3>
          <el-table :data="[mainStudent]" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="contact" label="联系方式" />
          </el-table>
        </div>
        <div class="merge-center">
          <el-button type="primary" @click="swapStudents"><el-icon><switch-button /></el-icon></el-button>
        </div>
        <div class="merge-right">
          <h3>待合并学员</h3>
          <el-table :data="mergeCandidates" style="width: 100%" @selection-change="handleMergeSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="contact" label="联系方式" />
          </el-table>
        </div>
      </div>
      <el-form :model="mergeForm" ref="mergeFormRef" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="合并原因" prop="reason">
          <el-input v-model="mergeForm.reason" type="textarea" placeholder="请输入合并原因"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitMergeForm">确 定</el-button>
          <el-button @click="mergeDialog.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 学员画像对话框 -->
    <el-dialog :title="'学员画像 - ' + currentStudent.name" v-model="profileDialog.open" width="800px" append-to-body>
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="基本信息">
          <el-descriptions title="个人信息" :column="2">
            <el-descriptions-item label="姓名">{{ currentStudent.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ currentStudent.gender }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ currentStudent.age }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ currentStudent.contact }}</el-descriptions-item>
            <el-descriptions-item label="当前状态"><el-tag :type="getStatusType(currentStudent.status)">{{ getStatusText(currentStudent.status) }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="来源渠道">{{ currentStudent.source }}</el-descriptions-item>
            <el-descriptions-item label="报名课程">{{ currentStudent.course }}</el-descriptions-item>
            <el-descriptions-item label="期望岗位">{{ currentStudent.expectedPosition }}</el-descriptions-item>
            <el-descriptions-item label="学历">{{ currentStudent.education }}</el-descriptions-item>
            <el-descriptions-item label="工作经验">{{ currentStudent.workExperience }}</el-descriptions-item>
            <el-descriptions-item label="所在城市">{{ currentStudent.city }}</el-descriptions-item>
            <el-descriptions-item label="负责人">{{ currentStudent.responsiblePerson }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="标签信息" :column="3" style="margin-top: 20px;">
            <el-descriptions-item v-for="tag in currentStudent.tags" :key="tag" :label="tag">{{ tag }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="学习历史">
          <el-table :data="learningHistory" style="width: 100%">
            <el-table-column prop="courseName" label="课程名称" />
            <el-table-column prop="startTime" label="开始时间" width="180" />
            <el-table-column prop="endTime" label="结束时间" width="180" />
            <el-table-column prop="progress" label="进度" width="100">
              <template #default="scope">
                <el-progress :percentage="scope.row.progress" />{{ scope.row.progress }}%
              </template>
            </el-table-column>
            <el-table-column prop="score" label="成绩" width="80" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="跟进记录">
          <el-table :data="followUpRecords" style="width: 100%">
            <el-table-column prop="followUpTime" label="跟进时间" width="180" />
            <el-table-column prop="followUpPerson" label="跟进人" width="100" />
            <el-table-column prop="content" label="跟进内容" />
            <el-table-column prop="nextPlan" label="下一步计划" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="面试反馈">
          <el-table :data="interviewRecords" style="width: 100%">
            <el-table-column prop="interviewTime" label="面试时间" width="180" />
            <el-table-column prop="position" label="面试岗位" />
            <el-table-column prop="interviewer" label="面试官" width="100" />
            <el-table-column prop="feedback" label="面试反馈" />
            <el-table-column prop="result" label="面试结果" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.result === '通过' ? 'success' : 'danger'">{{ scope.row.result }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="入职信息" v-if="currentStudent.status === '已入职'">
          <el-descriptions title="入职详情" :column="2">
            <el-descriptions-item label="公司名称">{{ currentStudent.companyName }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ currentStudent.position }}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{ currentStudent.entryTime }}</el-descriptions-item>
            <el-descriptions-item label="薪资">{{ currentStudent.salary }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ currentStudent.employmentRemark }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="profileDialog.open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getToken } from '@/utils/auth'
import { mergeRecursive } from '@/utils/ruoyi'

// 导入图标
import { UploadFilled, SwitchButton } from '@element-plus/icons-vue'

// 模拟学员数据
const studentList = ref([
  {
    id: 1,
    name: '张三',
    gender: '男',
    age: 25,
    contact: '13800138000 / 010-12345678 / zhangsan@example.com',
    status: '意向',
    source: '官网',
    course: '前端开发',
    expectedPosition: '前端工程师',
    education: '本科',
    workExperience: '2年',
    city: '北京',
    tags: ['潜力学员', 'VIP'],
    remark: '主动咨询，意向强烈',
    responsiblePerson: '李四',
    lastFollowTime: '2024-05-10 14:30:00',
    enrollmentHistory: '基础班（2023）',
    contractLink: 'https://example.com/contract/1',
    // 画像数据
    learningHistory: [
      { courseName: '前端开发基础', startTime: '2023-03-15', endTime: '2023-06-15', progress: 95, score: '优秀' },
      { courseName: 'JavaScript高级', startTime: '2023-07-01', endTime: '2023-09-30', progress: 88, score: '良好' }
    ],
    followUpRecords: [
      { followUpTime: '2024-05-10 14:30:00', followUpPerson: '李四', content: '沟通课程进度和就业方向', nextPlan: '安排模拟面试' },
      { followUpTime: '2024-05-05 10:15:00', followUpPerson: '李四', content: '解答技术问题', nextPlan: '提供面试资料' }
    ],
    interviewRecords: [
      { interviewTime: '2024-04-20 09:30:00', position: '前端工程师', interviewer: '王五', feedback: '技术基础扎实，沟通能力强', result: '通过' }
    ],
    // 入职信息（仅已入职学员有）
    companyName: '',
    position: '',
    entryTime: '',
    salary: '',
    employmentRemark: ''
  },
  {
    id: 2,
    name: '张三',
    gender: '男',
    age: 26,
    contact: '13900139000 / zhangsan@example.com',
    status: '已联系',
    source: '转介绍',
    course: 'Java开发',
    expectedPosition: 'Java工程师',
    education: '本科',
    workExperience: '3年',
    city: '上海',
    tags: ['待跟进'],
    remark: '转介绍学员，需要进一步沟通',
    responsiblePerson: '赵六',
    lastFollowTime: '2024-05-08 16:45:00',
    enrollmentHistory: '',
    contractLink: '',
    learningHistory: [],
    followUpRecords: [
      { followUpTime: '2024-05-08 16:45:00', followUpPerson: '赵六', content: '初步沟通课程需求', nextPlan: '发送课程大纲' }
    ],
    interviewRecords: [],
    companyName: '',
    position: '',
    entryTime: '',
    salary: '',
    employmentRemark: ''
  },
  // 可继续添加更多模拟数据
])

// 当前操作的学员
const currentStudent = ref({})

// 导入相关配置
const upload = reactive({
  open: false,
  title: '导入线索',
  isUploading: false,
  updateSupport: 0,
  headers: { Authorization: 'Bearer ' + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + '/student/importData'
})

// 状态变更对话框
const statusDialog = reactive({
  open: false
})

// 状态表单
const statusForm = reactive({
  newStatus: '',
  reason: ''
})

// 标签管理对话框
const tagDialog = reactive({
  open: false
})

// 标签表单
const tagForm = reactive({
  newTag: '',
  batchTags: ''
})

// 已选标签
const selectedTags = ref([])

// 推荐标签
const recommendedTags = ref(['高潜', '待转介绍', '技术扎实', '沟通能力强', '学习积极', '就业意向明确'])

// 学员合并对话框
const mergeDialog = reactive({
  open: false
})

// 主学员
const mainStudent = ref({})

// 合并候选学员
const mergeCandidates = ref([])

// 合并表单
const mergeForm = reactive({
  reason: ''
})

// 合并选中的学员
const mergeSelected = ref([])

// 学员画像对话框
const profileDialog = reactive({
  open: false
})

// 激活的标签页
const activeTab = ref('basic')

// 学习历史
const learningHistory = ref([])

// 跟进记录
const followUpRecords = ref([])

// 面试反馈
const interviewRecords = ref([])

// 状态列表和迁移规则
const statusMap = {
  '陌生': { text: '陌生', type: 'info', next: ['已联系', '失效'] },
  '已联系': { text: '已联系', type: 'success', next: ['意向', '失效'] },
  '意向': { text: '意向', type: 'warning', next: ['已报名', '失效'] },
  '已报名': { text: '已报名', type: 'primary', next: ['已入职', '失效'] },
  '已入职': { text: '已入职', type: 'success', next: ['失效'] },
  '失效': { text: '失效', type: 'danger', next: [] }
}

// 获取状态对应的文本
const getStatusText = (status) => {
  return statusMap[status]?.text || status
}

// 获取状态对应的标签类型
const getStatusType = (status) => {
  return statusMap[status]?.type || ''
}

// 获取可用的状态列表
const availableStates = computed(() => {
  if (!currentStudent.value || !currentStudent.value.status) return []
  const currentStatus = currentStudent.value.status
  return Object.keys(statusMap).map(key => ({
    value: key,
    label: statusMap[key].text,
    available: key === currentStatus || statusMap[currentStatus].next.includes(key)
  }))
})

// 导入按钮操作
function handleImport() {
  upload.title = '导入线索'
  upload.open = true
}

// 下载模板操作
function importTemplate() {
  const { proxy } = getCurrentInstance()
  proxy.download('student/importTemplate', {}, `student_template_${new Date().getTime()}.xlsx`)
}

// 文件上传中处理
function handleFileUploadProgress(event, file, fileList) {
  upload.isUploading = true
}

// 文件上传成功处理
function handleFileSuccess(response, file, fileList) {
  const { proxy } = getCurrentInstance()
  upload.open = false
  upload.isUploading = false
  proxy.$refs['uploadRef'].handleRemove(file)
  proxy.$alert(`<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>${response.msg}</div>`, '导入结果', { dangerouslyUseHTMLString: true })
  // 刷新学员列表
  // getList()
}

// 提交上传文件
function submitFileForm() {
  const { proxy } = getCurrentInstance()
  proxy.$refs['uploadRef'].submit()
}

// 修改学员信息
function handleUpdate(row) {
  // 这里实现修改逻辑
  console.log('修改学员:', row)
}

// 查看学员画像
function viewProfile(row) {
  currentStudent.value = { ...row }
  learningHistory.value = row.learningHistory || []
  followUpRecords.value = row.followUpRecords || []
  interviewRecords.value = row.interviewRecords || []
  profileDialog.open = true
}

// 变更状态
function changeStatus(row) {
  currentStudent.value = { ...row }
  statusForm.newStatus = ''
  statusForm.reason = ''
  statusDialog.open = true
}

// 提交状态变更
function submitStatusForm() {
  const { proxy } = getCurrentInstance()
  proxy.$refs['statusFormRef'].validate((valid) => {
    if (valid) {
      // 这里实现状态变更逻辑
      currentStudent.value.status = statusForm.newStatus
      currentStudent.value.lastFollowTime = new Date().toISOString().replace('T', ' ').substr(0, 19)
      // 更新学员列表中的数据
      const index = studentList.value.findIndex(item => item.id === currentStudent.value.id)
      if (index !== -1) {
        studentList.value[index] = { ...currentStudent.value }
      }
      statusDialog.open = false
      proxy.$modal.msgSuccess('状态变更成功')
    }
  })
}

// 标签管理
function handleTags() {
  // 这里应该获取选中的学员
  // 为简化示例，这里使用第一个学员
  if (studentList.value.length > 0) {
    currentStudent.value = { ...studentList.value[0] }
    selectedTags.value = [...currentStudent.value.tags || []]
    tagDialog.open = true
  } else {
    const { proxy } = getCurrentInstance()
    proxy.$modal.msgWarning('请先选择学员')
  }
}

// 添加标签
function addTag(tag) {
  if (!selectedTags.value.includes(tag)) {
    selectedTags.value.push(tag)
  }
}

// 移除标签
function removeTag(tag) {
  selectedTags.value = selectedTags.value.filter(item => item !== tag)
}

// 添加批量标签
function addBatchTags() {
  if (tagForm.batchTags) {
    const tags = tagForm.batchTags.split(',').map(tag => tag.trim()).filter(tag => tag)
    tags.forEach(tag => addTag(tag))
    tagForm.batchTags = ''
  }
}

// 提交标签表单
function submitTagForm() {
  const { proxy } = getCurrentInstance()
  // 更新学员标签
  currentStudent.value.tags = [...selectedTags.value]
  // 更新学员列表中的数据
  const index = studentList.value.findIndex(item => item.id === currentStudent.value.id)
  if (index !== -1) {
    studentList.value[index] = { ...currentStudent.value }
  }
  tagDialog.open = false
  proxy.$modal.msgSuccess('标签更新成功')
}

// 学员合并
function handleMerge() {
  // 这里应该获取选中的学员作为主学员
  // 为简化示例，这里使用第一个学员
  if (studentList.value.length > 0) {
    mainStudent.value = { ...studentList.value[0] }
    // 查找可能重复的学员（这里简单实现为同姓名的学员）
    mergeCandidates.value = studentList.value.filter(item => item.id !== mainStudent.value.id && item.name === mainStudent.value.name)
    mergeSelected.value = []
    mergeDialog.open = true
  } else {
    const { proxy } = getCurrentInstance()
    proxy.$modal.msgWarning('请先选择主学员')
  }
}

// 交换主学员和待合并学员
function swapStudents() {
  if (mergeSelected.value.length > 0) {
    const temp = mainStudent.value
    mainStudent.value = { ...mergeSelected.value[0] }
    mergeCandidates.value = [...mergeCandidates.value.filter(item => item.id !== mainStudent.value.id), temp]
    mergeSelected.value = []
  }
}

// 合并选中的学员
function handleMergeSelectionChange(selection) {
  mergeSelected.value = selection
}

// 提交合并表单
function submitMergeForm() {
  const { proxy } = getCurrentInstance()
  proxy.$refs['mergeFormRef'].validate((valid) => {
    if (valid && mergeSelected.value.length > 0) {
      // 合并学员数据
      mergeSelected.value.forEach(candidate => {
        // 合并学习历史
        if (candidate.learningHistory && candidate.learningHistory.length) {
          mainStudent.value.learningHistory = [...(mainStudent.value.learningHistory || []), ...candidate.learningHistory]
        }
        // 合并跟进记录
        if (candidate.followUpRecords && candidate.followUpRecords.length) {
          mainStudent.value.followUpRecords = [...(mainStudent.value.followUpRecords || []), ...candidate.followUpRecords]
        }
        // 合并面试反馈
        if (candidate.interviewRecords && candidate.interviewRecords.length) {
          mainStudent.value.interviewRecords = [...(mainStudent.value.interviewRecords || []), ...candidate.interviewRecords]
        }
        // 合并标签
        if (candidate.tags && candidate.tags.length) {
          candidate.tags.forEach(tag => {
            if (!mainStudent.value.tags.includes(tag)) {
              mainStudent.value.tags.push(tag)
            }
          })
        }
        // 删除待合并学员
        studentList.value = studentList.value.filter(item => item.id !== candidate.id)
      })
      // 更新主学员
      const index = studentList.value.findIndex(item => item.id === mainStudent.value.id)
      if (index !== -1) {
        studentList.value[index] = { ...mainStudent.value }
      }
      mergeDialog.open = false
      proxy.$modal.msgSuccess('学员合并成功')
    }
  })
}

// 页面加载时执行
onMounted(() => {
  // 初始化数据
  // getList()
})

// 定义表单规则
const statusRules = {
  newStatus: [{ required: true, message: '请选择目标状态', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }]
}

const tagRules = {
  newTag: []
}

const mergeRules = {
  reason: [{ required: true, message: '请输入合并原因', trigger: 'blur' }]
}
</script>

<style scoped>
.student-manage {
  padding: 20px;
}

.merge-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.merge-left,
.merge-right {
  flex: 1;
}

.merge-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.merge-left h3,
.merge-right h3 {
  margin-bottom: 10px;
  text-align: center;
}
</style>
